<template>
    <div class="song-line-container" :style="{background:(index%2==0?'white':'rgb(242, 242, 243)')}" @mouseenter="enter" @mouseleave="enter">
        <div class="song-msg-container">
            <div class="num">
                <div v-if="!isHover">{{index}}</div>
                <img @click="playMusic" v-if="isHover" src="../../../../assets/main/recent/play.png">
            </div>
            <div class="name">{{name}}</div>
            <div class="arts">艺术家：{{artList}}</div>
            <div class="album">专辑：{{album.name}}</div>
            <div></div>
        </div>
    </div>
</template>

<script>
import {onMounted, ref} from "vue";
import {useStore} from "vuex";

export default {
    name: "songSingleList",
    props:['index', 'name', 'id','arts','album'],
    emits:['callNowPlayList'],
    setup(props, context) {
        let store = useStore()

        let isHover = ref(false)
        let artList = ref('')

        function enter() {
            isHover.value = !isHover.value
        }

        function getArts() {
            let arr = []
            props.arts.forEach(item=>{
                arr.push(item.name)
            })
            artList.value = arr.join('/')
        }

        async function playMusic() {
            store.commit('playerStore/setSongId', props.id)
            setRecentPlay()
            context.emit('callNowPlayList', props.id)
        }

        function setRecentPlay() {
            if (localStorage.getItem('recentPlay') === null) {
                localStorage.setItem('recentPlay', JSON.stringify([]))
            }

            let recentPlay = JSON.parse(localStorage.getItem('recentPlay'))
            let obj = {
                id:props.id,
                name:props.name,
                arts:props.arts,
                album:props.album
            }

            for (let index in recentPlay) {
                if (recentPlay[index].id == obj.id) {
                    recentPlay.splice(index, 1)
                }
            }
            recentPlay.push(obj)
            localStorage.setItem('recentPlay', JSON.stringify(Array.from(recentPlay)))
        }



        function init() {
            getArts()
        }

        onMounted(()=>{
            init()
        })

        return {
            isHover,
            artList,
            enter,
            getArts,
            playMusic,

        }
    }
}
</script>

<style scoped>
.song-line-container {
    width: 100%;
    height: 40px;
    background-color: rgb(242, 242, 243);
    font-size: small;
}

.song-msg-container {
    padding:  0 0 0 20px;
    width: calc(100% - 20px);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.song-line-container .num {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.song-line-container .num img{
    width: 30px;
    height: 30px;
    border-radius: 20px;
    transition: all ease-in-out 300ms;
}

.song-line-container .num img:hover{
    box-shadow: 0 0 4px red;
}

.song-line-container .name {
    width: 300px;
    display: flex;
    align-items: center;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap
}

.song-line-container .arts {
    width: 250px;
    display: flex;
    align-items: center;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap
}

.song-line-container .album {
    width: 350px;
    display: flex;
    align-items: center;
    height: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap
}
</style>